import { State, Getters } from '@/plugin/types/store';
import { Module } from 'vuex';
import { get as _get } from 'lodash'

// #region 提交变动、调度事件的定义

/** 提交标题的变动 */
export const COMMIT_TITLE = "base/set_title"
/** 初始化的调度 */
export const DISPATCH_INIT = "base/init"

// #endregion

/**
 * 定义该模块的对外接口
 */
declare module '@/plugin/types/store' {
    interface State {
        /** 基本信息 */
        base: BaseState
    }
    interface Getters {
        /** 基本获取器 */
        base: BaseGetters
    }
    interface CommitTree {
        [COMMIT_TITLE]: string
    }
    interface DispatchTree {
        [DISPATCH_INIT]: DispatchTreeNode<void, void>
    }
}

/**
 * 当前模块的状态定义
 */
interface BaseState {
    /**
     * api 地址。
     * 网站 AJAX 访问的基本地址，前值为 laravel 自行在脚本前注入，后值为热更新时使用的地址。
     */
    api_url: string
    /** 基本标题 */
    title: string
}
/**
 * 
 */
interface BaseGetters {
    get_api_url: string
}

/** 定义模块内容 */
export default {
    // 模块名空间开关。
    // 建议打开，这样在根状态引入时可以把该状态下的所有内容放在相应的名空间下，便于管理
    namespaced: true,
    state: {
        api_url: "",
        title: ""
    },
    getters: {
        get_api_url(state: BaseState, getters: BaseGetters, rootState: State, rootGetter: Getters): string {
            return state.api_url;
        }
    },
    mutations: {
        set_title(state: BaseState, payload: string) {
            state.title = payload;
        }
    },
    actions: {
        init({ state }) {
            state.api_url = _get(window, "api_base_url", process.env.VUE_APP_API_BASE_URL)
        }
    }
} as Module<BaseState, State>; // 该 as 语句用于限定类型